<template>
  <div class="news-change-content" @mouseleave="() => {isShow = false; active = 0}">
    <div class="news-change-bar">
        <span
          :class="active === 0 ? 'active' : ''"
          @mouseover="() => { active = 0; isShow = false }">公告</span>
        <span
          :class="active === 1 ? 'active' : ''"
          @mouseover="() => { active = 1; isShow = false }">规则</span>
        <span
          :class="active === 2 ? 'active' : ''"
          @mouseover="() => { active = 2; isShow = true }">帮助与客服</span>
    </div>
    <div class="news-list" v-if="active === 0 || active === 1">
      <template v-if="active === 0">
        <router-link :to="{path: '#'}" class="news-item" v-for="item in newsData.notice" :key="item.title">
          <div class="title">{{ item.title }}</div>
          <div class="create-time">[{{ item.createTime }}]</div>
        </router-link>
      </template>
      <template v-if="active === 1">
        <router-link :to="{path: '#'}" class="news-item" v-for="item in newsData.rules" :key="item.title">
          <div class="title">{{ item.title }}</div>
          <div class="create-time">[{{ item.createTime }}]</div>
        </router-link>
      </template>
    </div>
    <div
      class="dorpdown-box left"
      v-show="isShow"
      @mouseleave="() => {isShow = false; active = 0}"
      @mouseover="() => { active = 2; isShow = true }">
      <router-link :to="{path: '#'}" class="book-btn2 iconfont icon-wenhaoyuanyiwenmianxing">帮助中心</router-link>
      <span class="desc">9:00-20:30</span>
      <router-link :to="{path: '#'}" class="book-btn2 iconfont icon-liuyan">在线留言</router-link>
      <span class="desc">客服电话<span class="time">(8:00-21:00)</span></span>
      <span class="desc">010-62620698</span>
      <span class="desc">010-64755951</span>
      <span class="space"></span>
      <span class="desc">纠纷处理<span class="time">(9:00-18:00)</span></span>
      <span class="desc">010-64726856</span>
      <span class="space"></span>
      <span class="desc">图书审核 (9:00-18:00)</span>
      <span class="desc">010-62620918</span>
      <span class="space"></span>
      <router-link :to="{path: '#'}" class="book-btn2 iconfont icon-QQ">联系客服</router-link>
      <router-link :to="{path: '#'}" class="book-btn2 iconfont icon-zhongbaojiandu">监督建议</router-link>
    </div>
  </div>
</template>

<script>
// import '@/components/header/components/headerMenuItem.scss'

export default {
  name: 'news',
  data () {
    return {
      titleData: ['公告', '规则', '帮助与客服'],
      active: 0,
      newsData: {
        notice: [
          { title: '关于打击引导私下交易和不规范标示售价及邮费行为的公告', createTime: '2019-03-19' },
          { title: '关于调整书店区收费的公告', createTime: '2019-02-18' }
        ],
        rules: [
          { title: '孔夫子旧书网交易流程及超时规则（新）', createTime: '2017-11-05' },
          { title: '孔夫子旧书网关于普通书书品品相规则', createTime: '2014-03-29' }
        ]
      },
      isShow: false
    }
  }
}
</script>

<style lang="scss" scoped>
  .news-change-content {
    position: relative;
    min-height: 200px;
    .news-change-bar {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      span {
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 5px;
        cursor: pointer;
        border-bottom: 1px solid transparent;
        &:hover, &.active {
          border-bottom: 1px solid #8C222C;
          color: #8C222C;
        }
      }
    }
    .news-list {
      background: #FFFFFF;
      padding: 10px;
      margin: 0 10px;
      margin-top: 5px;
      .news-item + .news-item {
        margin-top: 10px;
      }
      .news-item {
        display: block;
        margin-bottom: 10px;
        text-decoration: none;
        color: #000000;
        .title {
          font-size: 14px;
          line-height: 18px;
        }
        .create-time {
          color: #3F3F3F;
          font-size: 12px;
        }
        &:hover {
          color: #8C222C;
        }
      }
    }
  }
  .dorpdown-box {
    position: absolute;
    top: 30px;
    width: 140px;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    padding: 15px 10px;
    width: calc(100% - 40px);
    margin: 0 10px;
    font-size: 14px;
    z-index: 11;
    .desc {
      line-height: 20px;
      .time {
        color: #AFAFAF;
      }
    }
    span.space {
      margin: 5px 0;
    }
    .book-btn2 {
      display: block;
      font-size: 12px;
      background: #F8F7F3;
      color: #000000;
      width: 100%;
      text-align: center;
      text-decoration: none;
      border: 1px solid #AFAFAF;
      margin-bottom: 5px;
      padding: 5px 0px;
      cursor: pointer;
      &.iconfont {
        &::before {
          color: #A5806D;
        }
      }
      &:hover, :active, :focus {
        color: #A5806D;
        border-color: #A5806D;
      }
    }
  }
</style>
